import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Modal, Row, DatePicker, Input } from 'antd';
import moment from 'moment';
import HOCSelect from '@/components/AntDesign/Select';

const { TextArea } = Input;
const { MonthPicker } = DatePicker;
const { Option } = Select;
const FormItem = Form.Item;
@Form.create()
class UpdateModle extends React.Component {
  formItemLayout = {
    labelCol: {
      xs: {
        span: 6,
      },
    },
    wrapperCol: {
      xs: {
        span: 17,
      },
    },
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {}

  // 提交数据
  submitUpdateData = () => {
    const { form, injFlag, injList, submitUpdateData } = this.props;
    form.validateFields((err, values) => {
      const tempValues = {};
      Object.keys(values).forEach(key => {
        if (key === 'validDate') {
          tempValues.validDate = moment(values.validDate).valueOf();
        } else {
          tempValues[key] = values[key];
        }
      });
      if (!err) {
        if (injFlag) {
          const injInfo = injList.filter(item => item.injSecAccoId === values.injInsAccoId)[0];
          tempValues.entryAdjDetUpdDtos.forEach((item, i, arr) => {
            const tempArr = arr;
            if (item.ass === 5) {
              tempArr[i] = {
                ...item,
                injInsAccoName: injInfo.injSecAccoName,
                injInsAccoId: injInfo.injSecAccoId,
                injSecAccoCode: injInfo.injSecAccoCode,
              };
            }
          });
        }

        delete tempValues.injInsAccoId;
        submitUpdateData(tempValues);
      }
    });
  };

  // 工伤二级户
  renderInjList = () => {
    const {
      form: { getFieldDecorator },
      injInsAccoId,
      injList,
    } = this.props;
    return (
      <Row>
        <FormItem {...this.formItemLayout} label={<span>工伤二级户</span>}>
          {getFieldDecorator('injInsAccoId', {
            rules: [
              {
                required: true,
                message: '二级户名称',
              },
            ],
            initialValue: injInsAccoId ? injInsAccoId.toString() : undefined,
          })(
            <HOCSelect style={{ width: '100%' }}>
              {injList &&
                injList.map(options => (
                  <Option key={options.injSecAccoId}>{options.injSecAccoName}</Option>
                ))}
            </HOCSelect>
          )}
        </FormItem>
      </Row>
    );
  };

  disabledEndTime = current => {
    const { dataSource } = this.props;
    const currentDateYM = moment().format('YYYYMM');
    const { rtnStateFlag } = dataSource;
    if (Number(rtnStateFlag) === 1) {
      // 已回盘
      return current < moment(currentDateYM, 'YYYY-MM').endOf('day');
    }
    // 未回盘
    return current < moment(currentDateYM - 1, 'YYYY-MM').endOf('day');
  };

  // 限制生效日期时间
  disabledDate = (current, startDate) => {
    if (!startDate) {
      return false;
    }
    return current < moment(startDate).subtract(0, 'months');
  };

  render() {
    const {
      form: { getFieldDecorator },
      visUpdate,
      visUpdateModle,
      dataSource,
      getInjList,
      accoId,
      injFlag,
      // disabledYmFlag,
    } = this.props;
    const { entryAdjDetUpdDtos } = dataSource;
    // 执行账户选项
    const declare = item => {
      if (item.ass === 5 && Number(item.injInsAccoFlag) === 1) {
        return (
          <HOCSelect style={{ width: '100%' }} onChange={accoIds => getInjList(accoIds)}>
            {item.accoList &&
              item.accoList.map(options => (
                <Option key={options.accoId} disabled={options.isDisabled}>
                  {options.accoName}
                </Option>
              ))}
          </HOCSelect>
        );
      }
      return (
        <HOCSelect style={{ width: '100%' }}>
          {item.accoList &&
            item.accoList.map(options => (
              <Option key={options.accoId} disabled={options.isDisabled}>
                {options.accoName}
              </Option>
            ))}
        </HOCSelect>
      );
    };
    return (
      <Modal
        title="修改"
        visible={visUpdate}
        okText="确定"
        cancelText="取消"
        onOk={this.submitUpdateData}
        onCancel={() => visUpdateModle(false)}
        destroyOnClose
      >
        <FormItem {...this.formItemLayout} style={{ display: 'none' }}>
          {getFieldDecorator(`adjId`, {
            initialValue: dataSource.adjId ? dataSource.adjId : undefined,
          })(<span />)}
        </FormItem>
        <FormItem {...this.formItemLayout} style={{ display: 'none' }}>
          {getFieldDecorator(`execAdjId`, {
            initialValue: dataSource.execAdjId ? dataSource.execAdjId : undefined,
          })(<span />)}
        </FormItem>
        <FormItem {...this.formItemLayout} style={{ display: 'none' }}>
          {getFieldDecorator(`sendId`, {
            initialValue: dataSource.sendId ? dataSource.sendId : undefined,
          })(<span />)}
        </FormItem>
        {entryAdjDetUpdDtos &&
          entryAdjDetUpdDtos.map((item, i) => (
            <Row key={item.ass}>
              <FormItem {...this.formItemLayout} label={<span>{item.assName}执行账户</span>}>
                {getFieldDecorator(`entryAdjDetUpdDtos[${i}][accoId]`, {
                  rules: [
                    {
                      required: true,
                      message: '请选择执行账户',
                    },
                  ],
                  initialValue: item.accoId ? item.accoId : undefined,
                })(declare(item))}
              </FormItem>
              <FormItem {...this.formItemLayout} style={{ display: 'none' }}>
                {getFieldDecorator(`entryAdjDetUpdDtos[${i}][accoName]`, {
                  initialValue: item.accoName ? item.accoName : undefined,
                })(<span />)}
              </FormItem>
              <FormItem {...this.formItemLayout} style={{ display: 'none' }}>
                {getFieldDecorator(`entryAdjDetUpdDtos[${i}][ass]`, {
                  initialValue: item.ass ? item.ass : undefined,
                })(<span />)}
              </FormItem>
              <FormItem {...this.formItemLayout} style={{ display: 'none' }}>
                {getFieldDecorator(`entryAdjDetUpdDtos[${i}][assName]`, {
                  initialValue: item.assName ? item.assName : undefined,
                })(<span />)}
              </FormItem>
              <FormItem {...this.formItemLayout} style={{ display: 'none' }}>
                {getFieldDecorator(`entryAdjDetUpdDtos[${i}][accoName]`, {
                  initialValue: item.accoName ? item.accoName : undefined,
                })(<span />)}
              </FormItem>
              <FormItem {...this.formItemLayout} style={{ display: 'none' }}>
                {getFieldDecorator(`entryAdjDetUpdDtos[${i}][injInsAccoFlag]`, {
                  initialValue: item.injInsAccoFlag ? item.injInsAccoFlag : undefined,
                })(<span />)}
              </FormItem>
            </Row>
          ))}
        {injFlag ? this.renderInjList(accoId) : null}
        <Row>
          <FormItem {...this.formItemLayout} label="生效日期">
            {getFieldDecorator('validDate', {
              rules: [
                {
                  required: true,
                  message: '请选择生效日期',
                },
              ],
              initialValue: dataSource.validDate
                ? moment(moment(dataSource.validDate).format('YYYY-MM'), 'YYYY-MM')
                : undefined,
            })(
              <MonthPicker
                // disabled={disabledYmFlag}
                // disabledDate={this.disabledEndTime}
                disabledDate={current => this.disabledDate(current, dataSource.validDate)}
                format="YYYY-MM-01"
                placeholder="请选择"
                style={{ width: '100%' }}
              />
            )}
          </FormItem>
        </Row>

        <Row>
          <FormItem {...this.formItemLayout} label={<span>备注</span>}>
            {getFieldDecorator('content', {
              rules: [
                {
                  required: true,
                  message: '请输入备注',
                },
              ],
            })(<TextArea placeholder="请输入备注" autoSize={{ minRows: 3, maxRows: 6 }} />)}
          </FormItem>
        </Row>
      </Modal>
    );
  }
}
export default UpdateModle;
